<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>City Night</title>
		<link rel="shortcut icon" href="assets/images/favicon.png">
		<link href="plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet">
		<link href="plugins/slick/slick.css" rel="stylesheet">
		<link href="plugins/slick-nav/slicknav.css" rel="stylesheet">
		<link href="plugins/wow/animate.css" rel="stylesheet">
		<link href="assets/css/bootstrap.css" rel="stylesheet">
		<link href="assets/css/theme.css" rel="stylesheet">
	</head>
	<body class="">
	<div id="app">
		<div id="page-loader">
			<div class="loaders">
				<img src="assets/images/loader/3.gif" alt="First Loader">
				<img src="assets/images/loader/4.gif" alt="First Loader">
			</div>
		</div>
		<header id="site-header">
			<div id="site-header-top">
				<div class="container">
					<div class="row">
						<div class="col-md-5">
							<div class="clearfix">
								<button
									class="btn btn-warning btn-lg header-btn visible-sm pull-right">List
									your Property for Free</button>
								<p class="timing-in-header">Open Hours: Monday to Saturday -
									8am to 6pm</p>
							</div>
						</div>
						<div class="col-md-7">
							<div class="clearfix" v-if="!checkLogin">
								<a class="btn btn-warning btn-lg header-btn hidden-sm"
									href="/user/login.html">点此登录</a>
							</div>
							<div class="clearfix" v-else>
								<a class="btn  btn-lg header-btn" href="javascript:void(0)"
									@Click="out()">退出</a> <a class="btn  btn-lg header-btn"
									href="/user/user.html">个人中心</a> <a
									class="btn btn-warning btn-lg header-btn hidden-sm"
									href="/user/user.html">欢迎：{{user.nickName}}</a>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="container">
				<div class="row">
					<div class="col-md-3">
						<figure id="site-logo">
							<a href="index.html"><img src="assets/images/logo.png"
								alt="Logo"></a>
						</figure>
					</div>
					<div class="col-md-6 col-sm-8">
						<nav id="site-nav" class="nav navbar-default">
							<ul class="nav navbar-nav">
								<li><a href="index.html">主页</a></li>
								<li><a href="property-listing.html">查询</a></li>
								<li><a href="gallery.html">展示</a></li>
								<li><a href="contact.html">反馈</a></li>
							</ul>
						</nav>
					</div>
					<div class="col-md-3 col-sm-4">
						<div class="contact-in-header clearfix">
							<i class="fa fa-mobile"></i> <span> 联系我们 <br> <strong>111
									222 333 444</strong>
							</span>
						</div>
					</div>
				</div>
			</div>
		</header>
		<div id="property-single">
			<div id="main-slider">		
			</div>
			<div class="container">
				<div class="row">
					<div class="col-lg-8 col-md-7">
						<section class="property-meta-wrapper common">
							<h3 class="entry-title">{{roomInfo.rname}}</h3>
							<div class="property-single-meta" >
								<ul class="clearfix">
									<li v-if="type == '月租'"> 租房须知： 需要先支付三个月定金，提前退房不返还 </li>
									<li><span>住房面积 :</span> {{roomInfo.area}} 平方米 </li>
									<li><span>住房编号:</span> #{{roomInfo.rno}} </li>
									<li><span>卧室数 :</span> {{roomInfo.bed}} Room </li>
									<li><span>客厅数 :</span> {{roomInfo.meta}} Room </li>
									<li><span>卫生间数 :</span> {{roomInfo.nums}} Room </li>
									<li><span>房东 :</span> {{user.nickName}}</li>
									<li><span>Tel:</span> {{user.tel}}</li>
									<li><span>价格 :</span> ${{roomInfo.price}} </li>
									<li><span>地址 :</span> {{roomInfo.addr}} </li>
								</ul>
							</div>
						</section>
						<section class="property-contents common">
							<div class="entry-title clearfix">
								<h4 class="pull-left"> 介绍 </h4><a class="pull-right print-btn" href="javascript:window.print()"> 打印信息 <i class="fa fa-print"></i></a>
							</div>
							<p>{{roomInfo.descr}}</p>
						</section>
						<button type="button" class="btn btn-default btn-lg text-center" @Click="addOrder()">去下单</button>
					</div>
					<div class="col-lg-4 col-md-5">
						<div id="property-sidebar">
							<section class="widget recent-properties clearfix">
								<h5 class="title">猜你想看</h5>
								<div v-if="type == '出售'">
									<div class="property clearfix" v-for="sale in sales">
										<a href="#" class="feature-image zoom">
										<img data-action="zoom" :src="sale.pics" alt="Property Image">
										</a>
										<div class="property-contents">
											<h6 class="entry-title"><a :href="'single-property.html?' + sale.rno + '&' + sale.tno">{{sale.rname}}</a>
											</h6>
											<span class="btn-price">${{sale.price}}</span>
											<div class="property-meta clearfix">
												<span><i class="fa fa-arrows-alt"></i> {{sale.area}} 平方米</span>
												<span><i class="fa fa-bed"></i>  {{sale.bed}} 室</span>
												<span><i class="fa fa-bathtub"></i> {{sale.nums}} 卫</span>
											</div>
										</div>
									</div>		
								</div>
								<div v-else-if="type == '月租'">
									<div class="property clearfix" v-for="rent in rents">
										<a href="#" class="feature-image zoom">
										<img data-action="zoom" :src="rent.pics" alt="Property Image"></a>
										<div class="property-contents">
											<h6 class="entry-title"><a :href="'single-property.html?' + rent.rno + '&' + rent.tno">{{rent.rname}}</a>
											</h6>
											<span class="btn-price">${{rent.price}}</span>
											<div class="property-meta clearfix">
												<span><i class="fa fa-arrows-alt"></i> {{rent.area}} 平方米</span>
												<span><i class="fa fa-bed"></i>  {{rent.bed}} 室</span>
												<span><i class="fa fa-bathtub"></i> {{rent.nums}} 卫</span>
											</div>
										</div>
									</div>		
								</div>					
							</section>
							<section class="widget property-taxonomies clearfix">
								<h5 class="title">全部类别</h5>
								<ul class="clearfix">
									<li><a href="#"> 出售 </a><span class="pull-right">29</span></li>
									<li><a href="#"> 月租 </a><span class="pull-right">35</span></li>
								</ul>
							</section>
						</div>
					</div>
				</div>
			</div>
		</div>
		
	</div>
		<footer id="footer"></footer>
		<a href="#top" id="scroll-top"><i class="fa fa-angle-up"></i></a>
		<script src="assets/js/jquery.min.js"></script>
		<script src="assets/js/jquery.migrate.js"></script>
		<script src="assets/js/bootstrap.min.js"></script>
		<script src="plugins/slick-nav/jquery.slicknav.min.js"></script>
		<script src="plugins/jquery-ui/jquery-ui.min.js"></script>
		<script src="plugins/forms/jquery.form.min.js"></script>
		<script src="plugins/forms/jquery.validate.min.js"></script>
		<script src="plugins/modernizr/modernizr.custom.js"></script>
		<script src="plugins/wow/wow.min.js"></script>
		<script src="plugins/zoom/zoom.js"></script>
		<script src="plugins/mixitup/mixitup.min.js"></script>
		<script src="assets/js/theme.js"></script>
		<script src="js/jquery-3.4.1.min.js"></script>
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript" src="js/axios.js"></script>
		<script type="text/javascript" src="js/qs.js"></script>
		<script type="text/javascript" src="js/base.js"></script>
		<script type="text/javascript" src="js/showpage.js"></script>
		<script src="js/slide.js"></script>
		  <script src="./js/coco-message.js"></script>
		
		<script type="text/javascript">
		window.onload = function(){
		    $("#footer").load("footer.html");            
		}
		var rentLen;
		var saleLen;
		var rno;
		var tno;
		let app = new Vue ( {
	    	el: "#app",
	    	data: {
	    		sales: [],
	    		rents: [],
	    		roomInfo: [],
	    		type: '',
	    		checkLogin: false,
	    		user: {},
	    	},
	    	mounted: function ( ){
	    		axios.get("user/check" ).then (rt =>{
			    	if (rt.status == 200 && rt.data.code == 200){
			    		this.user = rt.data.data;
			    		this.checkLogin = true;
			    		return false;
			    	}
			    	this.checkLogin = false;
		    	})
	    		rno = decodeURI(location.search);
				if(rno == "" || rno.indexOf('&') <= 0){
					location.href="index.html";
					return;
				}
				
				details = rno.replace("?","").split("&");
				rno = details[0];
				tno = details[1];
				if(tno == 101){
					this.type = "出售";
				}else if(tno == 102){
					this.type = "月租";
				}
		    	axios.post( "room/findByRno", qs.stringify({rno: rno}) ).then (rt =>{
			    	if (rt.status == 200 && rt.data.code == 200){
			    		this.roomInfo = rt.data.data;
			    		$(".property-single-meta").attr("style", "background: url("+ this.roomInfo.photo + ") center right no-repeat;");
			    		axios.get( "room/findIndex" ).then (rt =>{
					    	if (rt.status == 200){
					    		this.sales = rt.data.sale;		    		
					    		this.rents = rt.data.rent;
					    		
					    		saleLen = this.sales.length;
					    		rentLen = this.rents.length;

					    		if(rentLen >= 4){
					    			this.rents.splice(4);
					    		}
			
				    			if(saleLen >= 4){
					    			this.sales.splice(4);
					    		}    		
						    	return false;
					    	}
				    	})
				    	return false;
			    	}
			    	
		    	});	    			    	
	    	},
	    	methods: {
	    		addOrder: function(){
	    			let rno = this.roomInfo.rno;
	    			let uno = this.user.uno;
	    			let x = this.checkLogin;
	    			
	    			if(!x){
	    				cocoMessage.info(1500, "请先登录！", function () {
				              
				        });
	    				return false;
	    			}
	    			if(uno == this.roomInfo.uno){
	    				window.alert("不可以买自己的房子哦");
	    				return false;
	    			}
	    			location.href="/order/order.html?"+rno+"&"+uno;
    				
	    		},
	    		out: function(){
	    			axios.get("user/out" ).then (rt =>{
				    	if (rt.status == 200 && rt.data.code == 200){
				    		this.user = [];
				    		this.checkLogin = false;
				    		return false;
				    	}
				    	this.user = [];
				    	this.checkLogin = false;
			    	})
	    		}
	    	}
	    })
		</script>
	</body>
</html>
